<!--定义了一个用于导航的 Vue 组件，作用是显示一个导航菜单列表，
并根据选中的菜单项来动态更新选中的样式和处理页面跳转。-->
<template>
  <ul class="dingdong-header-nav">
    <!-- 遍历 `styleList` 数组，渲染每一个导航项 `li` 标签 -->
    <!-- 根据 `activeName` 动态绑定类名 `active`，表示当前选中的菜单项 -->
    <li :class="{ active: item.name === activeName }" v-for="item in styleList" :key="item.path"
        @click="handleChangeView(item)">
      <!-- 显示菜单项的名称 -->
      {{ item.name }}
    </li>
  </ul>
</template>

<script lang="ts">
import {defineComponent, getCurrentInstance} from "vue";

export default defineComponent({
  props: {
    // 传入的 `styleList` 是一个数组，包含导航菜单项的数据
    styleList: Array,
    // `activeName` 用于标识当前选中的菜单项
    activeName: String,
  },
  // 使用 `emits` 定义可以向父组件发出的事件，这里定义了一个 `click` 事件
  emits: ["click"],
  setup() {
    // 获取当前组件的实例
    const {proxy} = getCurrentInstance();

    // 定义点击导航项时的处理函数
    function handleChangeView(item) {
      // 通过 `$emit` 向父组件触发 `click` 事件，并传递点击的菜单项的 `path` 和 `name`
      proxy.$emit("click", item.path, item.name);
    }

    // 返回需要在模板中使用的函数
    return {
      handleChangeView,
    };
  },
});
</script>

<style lang="scss" scoped>
@import "@/assets/css/var.scss";

li {
  // 设置导航项的外边距
  margin: $header-nav-margin;
  // 设置导航项的内边距
  padding: $header-nav-padding;
  // 设置导航项的行高
  line-height: 3.3rem;
  // 设置导航项的文本颜色
  color: $color-grey;
  // 取消导航项底部的边框
  border-bottom: none;
  // 设置导航项为可点击的鼠标样式
  cursor: pointer;
}

li.active {
  // 设置选中状态的导航项文本颜色为黑色
  color: $color-black;
  // 设置选中状态的导航项文本为粗体
  font-weight: 600;
  // 为选中状态的导航项底部添加一个 5px 的黑色边框
  border-bottom: 5px solid $color-black;
}
</style>
